<template>
    <div>
        <input type="checkbox" v-model="checkAll"> 全选/全不选
        <ul>
            <li v-for="(item,index) in list" :key="index">
                 <input type="checkbox" v-model="checkList[index]">姓名：{{ item.name }} 年龄：{{ item.age }}
            </li>
        </ul>
    </div>
</template>

<script lang='ts' setup>
import { computed } from "@vue/reactivity";
import { reactive, toRefs,ref ,defineProps} from "vue"

    // let { list } = toRefs(reactive({                            
    //     list:[10,20,30,40],
    // }))

    let props = defineProps({
        arr:{
            type:Array,
            default:[]
        }
    })

    console.log("props",props);
    
    let list = props.arr as UserType[];
    let checkList =ref(list.map(()=>false))
    console.log('jiacha',checkList);
    let aaa = ref(checkList)
    console.log('aaa',aaa);

    // 注意 当我们使用ref来对一个响应式数据进行定义成响应式的时候，我们可以使用ref来进行重复定义，
    // 意思是当你不知道某个数据是否已经是响应式数据了，你害怕它已经是响应式数据，然后又定义一次会出错，这个时候你仍然还是可以
    // 使用ref进行定义。因为vue底层源码已经过滤了的。会判断你这个数据是否已经是响应式数据，如果是，就跳过定义为响应式数据那一步。
    
    let checkAll = computed({
        get(){
            return !checkList.value.includes(false)
        },
        set(val){
            checkList.value = checkList.value.map(()=>val)
        }
    })                                               

    
</script>
 
<style lang = "less" scoped>
    
</style>